<script>
    $(".uploadeSetting .modal-dialog").css({
        width: $(window).width() * 0.8 + "px",
        height: ($(window).height() - 120) + "px"
    });
</script>
<div id="horizontal-form">
    <form class="form-horizontal" id="uploadPlusConfigForm" role="form">
        <div class="form-title">组件弹层参数</div>
        <div class="row">
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group" style="height: 34px;">
                    <label for="size" class="col-sm-2 control-label no-padding-right">弹层大小</label>
                    <div class="col-sm-10">
                        <div class="control-group">
                            <input type="hidden" name="size" value="large">
                            <div class="radio" style="width: 50%;float: left">
                                <label>
                                    <input name="sizeRadio" type="radio" class="colored-blue" data-target-input-name="size" value="small" >
                                    <span class="text">小</span>
                                </label>
                            </div>
                            <div class="radio" style="width: 50%;float: left;">
                                <label>
                                    <input name="sizeRadio" type="radio" class="colored-blue" data-target-input-name="size" value="large" checked="checked">
                                    <span class="text">大</span>
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input name="sizeRadio" type="radio" class="colored-blueberry">
                                    <span class="text"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label no-padding-right">弹出层标题</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="title" placeholder="title" value="文件上传" data-toggle="tooltip"  data-placement="left" data-original-title="文件上传组件层标题。默认值：文件上传">
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="width" class="col-sm-2 control-label no-padding-right">弹出层宽度</label>
                    <div class="col-sm-10">
                        <div class="spinner">
                            <input type="number" class="spinner-input form-control" data-bv-integer="true" min="1" maxlength="3" name="width" placeholder="width" data-toggle="tooltip"  data-placement="left" data-original-title="文件上传组件层宽度。默认值：浏览器可视宽度的80%">
                            <div class="spinner-buttons	btn-group btn-group-vertical">
                                <button type="button" class="btn spinner-up blue">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn spinner-down darkorange">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="height" class="col-sm-2 control-label no-padding-right">弹出层高度</label>
                    <div class="col-sm-10">
                        <div class="spinner">
                            <input type="number" class="spinner-input form-control" data-bv-integer="true" min="1" maxlength="3" name="height" placeholder="height" data-toggle="tooltip"  data-placement="left" data-original-title="文件上传组件层宽度。默认值：浏览器可视高度减去120像素">
                            <div class="spinner-buttons	btn-group btn-group-vertical">
                                <button type="button" class="btn spinner-up blue">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn spinner-down darkorange">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-title">基础参数</div>
        <div class="row">
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="fileNumLimit" class="col-sm-2 control-label no-padding-right">fileNumLimit</label>
                    <div class="col-sm-10">
                        <div class="spinner spinner_fileNumLimit">
                            <input type="number"  class="spinner-input form-control" data-bv-integer="true" min="1" name="fileNumLimit" placeholder="fileNumLimit" value="300" data-toggle="tooltip" data-placement="left" data-original-title="验证文件总数量, 超出则不允许加入队列。默认值：300个">
                            <div class="spinner-buttons	btn-group btn-group-vertical">
                                <button type="button" class="btn spinner-up blue">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn spinner-down darkorange">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="fileSizeLimit" class="col-sm-2 control-label no-padding-right">fileSizeLimit</label>
                    <div class="col-sm-10">
                        <div class="spinner spinner_fileSizeLimit">
                            <input type="number" class="spinner-input form-control" min="1" name="fileSizeLimit" placeholder="fileSizeLimit" value="209715200" data-toggle="tooltip"  data-placement="left" data-original-title="验证文件总大小是否超出限制, 超出则不允许加入队列。默认值：200 * 1024 * 1024 KB">
                            <div class="spinner-buttons	btn-group btn-group-vertical">
                                <button type="button" class="btn spinner-up blue">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn spinner-down darkorange">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="fileSingleSizeLimit" class="col-sm-2 control-label no-padding-right">fileSingleSizeLimit</label>
                    <div class="col-sm-10">
                        <div class="spinner spinner_fileSingleSizeLimit">
                            <input type="number"  class="spinner-input form-control" min="1" name="fileSingleSizeLimit" placeholder="fileSingleSizeLimit" value="52428800" data-toggle="tooltip"  data-placement="left" data-original-title="验证文件总大小是否超出限制, 超出则不允许加入队列。单个文件不得超过2G。默认值：50 * 1024 * 1024 KB">
                            <div class="spinner-buttons	btn-group btn-group-vertical">
                                <button type="button" class="btn spinner-up blue">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" class="btn spinner-down darkorange">
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="groupName" class="col-sm-2 control-label no-padding-right">groupName</label>
                    <div class="col-sm-10 buttons-preview">
                        <input type="text" class="form-control" required="required" name="groupName" placeholder="groupName" value="${columnJavaFieldName[0]}" data-toggle="tooltip" data-placement="left" data-original-title="该参数将参与文件缓存时的唯一标识值,如果配置了文件服务器,该参数同时会参与文件服务器文件存储目录分配,为保证文件不丢失,务必保证同一编辑页面此参数唯一">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-title">接收文件类型参数<a href="switchView.do?viewPath=sysPage/platform/codeGenerate/mime.html" target="_blank">类型参考</a></div>
        <div class="row">
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="accept_title" class="col-sm-2 control-label no-padding-right">类型名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="accept_title" placeholder="类型名" data-toggle="tooltip"  data-placement="left" data-original-title="文字描述">
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="accept_extensions" class="col-sm-2 control-label no-padding-right">扩展名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="accept_extensions" placeholder="扩展名" data-placement="left" data-toggle="tooltip"  data-original-title="允许的文件后缀，不带点，多个用逗号分割。">
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="accept_mimeTypes" class="col-sm-2 control-label no-padding-right">mimeTypes</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="accept_mimeTypes" placeholder="mimeTypes" data-toggle="tooltip"  data-placement="left" data-original-title="多个用逗号分割。">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-title">文件类型参数</div>
        <div class="row">
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group" style="height: 34px;">
                    <input type="hidden" name="uploadType" value="All">
                    <input type="hidden" name="isImg" value="false">
                    <div class="col-sm-3">
                        <label>
                            <input name="uploadTypeRadio" class="checkbox-slider" type="radio" value="Image" data-target-input-name="uploadType">
                            <span class="text">&nbsp;&nbsp;Image</span>
                        </label>
                    </div>
                    <div class="col-sm-3">
                        <label>
                            <input name="uploadTypeRadio" class="checkbox-slider" type="radio" value="Excel" data-target-input-name="uploadType">
                            <span class="text">&nbsp;&nbsp;Excel</span>
                        </label>
                    </div>
                    <div class="col-sm-3">
                        <label>
                            <input name="uploadTypeRadio" class="checkbox-slider" type="radio" value="World" data-target-input-name="uploadType">
                            <span class="text">&nbsp;&nbsp;World</span>
                        </label>
                    </div>
                    <div class="col-sm-3">
                        <label>
                            <input name="uploadTypeRadio" class="checkbox-slider" type="radio" value="All" data-target-input-name="uploadType" checked="checked">
                            <span class="text">&nbsp;&nbsp;All</span>
                        </label>
                    </div>
                    <div class="col-sm-0">
                        <label>
                            <input name="uploadTypeRadio" class="checkbox-slider" type="radio">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row imgSetting hidden">
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="imgMaxWidth" class="col-sm-2 control-label no-padding-right">imgMaxWidth</label>
                    <div class="col-sm-10">
                        <input type="number" class="spinner-input form-control" disabled="disabled" data-bv-integer="true" min="-1" maxlength="9" name="imgMaxWidth" placeholder="imgMaxWidth" value="-1" data-placement="left" data-toggle="tooltip"  data-original-title="图片文件允许的最大宽度(-1时不限制)">
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="imgMaxHeight" class="col-sm-2 control-label no-padding-right">imgMaxHeight</label>
                    <div class="col-sm-10">
                        <input type="number" class="spinner-input form-control" disabled="disabled" data-bv-integer="true" min="-1"  name="imgMaxHeight" placeholder="imgMaxHeight" value="-1" data-toggle="tooltip"  data-placement="left" data-original-title="图片文件允许的最大高度(-1时不限制)">
                    </div>
                </div>
            </div>
            <div class="col-xm-12 col-sm-6 col-lg-4">
                <div class="form-group">
                    <label for="sizes" class="col-sm-2 control-label no-padding-right">sizes</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="sizes" disabled="disabled" placeholder="sizes" data-placement="left" data-toggle="tooltip"  data-original-title="图片缩放尺寸(格式：宽度-高度,宽度-高度,宽度-高度....),如：500-300,400-300">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script src="assets/js/fuelux/spinner/fuelux.spinner.min.js"></script>
<script type="text/javascript">
    //数字输入
    $(".spinner_fileNumLimit").spinner({
        min:1,
        max:3000,
        value:300
    });
    $(".spinner_fileSizeLimit").spinner({
        min:1,
        max:999999999,
        value:209715200
    });
    $(".spinner_fileSingleSizeLimit").spinner({
        min:1,
        max:1073741824,
        value:52428800
    });
    //初始化表单验证
    var uploadPlusConfigForm=inintValidatorForm($("#uploadPlusConfigForm"));
    //设置接收文件类型参数
    $("[data-target-input-name='uploadType']").change(function(){
        var type=this.value;
        //显示隐藏图片参数设置项
        if(this.checked&&type=="Image"){
            $(".imgSetting").removeClass("hidden");
            $("[name='isImg']").val(true);
            $("[name='imgMaxWidth'],[name='imgMaxHeight'],[name='sizes']").attr("disabled",false);
        }else{
            $(".imgSetting").addClass("hidden");
            $("[name='isImg']").val(false);
            $("[name='imgMaxWidth'],[name='imgMaxHeight'],[name='sizes']").attr("disabled",true);
        }
        var accept_title=$("[name='accept_title']");
        var accept_extensions=$("[name='accept_extensions']");
        var accept_mimeTypes=$("[name='accept_mimeTypes']");
        switch(type){
            case "Image":
                accept_title.val("图片文件");
                accept_extensions.val("gif,jpg,jpeg,bmp,png,psd");
                accept_mimeTypes.val("image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/psd");
                break;
            case "Excel":
                accept_title.val("Excel文件");
                accept_extensions.val("xls,xlsx,xlsm,xltx,xltx,xltm");
                accept_mimeTypes.val("application/vnd.ms-excel");
                break;
            case "World":
                accept_title.val("World文件");
                accept_extensions.val("doc,docx,dot");
                accept_mimeTypes.val("application/msword");
                break;
            case "All":
                accept_title.val("");
                accept_extensions.val("");
                accept_mimeTypes.val("");
                break;
        }
    });
</script>
